<script setup>

</script>

<template>
  <div id="header">
    <!-- 左侧：欢迎 + 登录 + 注册 -->
    <div id="header-left">
      <div id="header-hello">
        <p>SKT服装租赁平台您</p>
      </div>
      <div id="header-login">
        <router-link to="/login" class="link">登录</router-link>
      </div>
      <div id="header-register">
        <router-link to="/register" class="link">注册</router-link>
      </div>
    </div>

    <!-- 右侧：首页 + 购物车 -->
    <div id="header-right">
      <div id="header-homePage">
        <router-link to="/home" class="link">首页</router-link>
      </div>
      <div id="header-cart">
        购物车
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 全局重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#header {
  width: 100%;
  height: 30px;
  position: relative;
  text-align: center;
}

/* 左侧组：整体左对齐 */
#header-left {
  position: absolute;
  left: 20px;
  top: 8%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

#header-left p {
  margin: 0;
  font-size: 14px;
}

/* 右侧组：整体右对齐 */
#header-right {
  position: absolute;
  right: 20px;
  top: 8%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0;
}

/* 首页和购物车样式 */
#header-homePage,
#header-cart {
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
}

#header-homePage:hover,
#header-cart:hover {
  background: rosybrown;
  opacity: 0.8;
}

#header-hello:hover,
#header-login:hover,
#header-register:hover {
  background: wheat;
  opacity: 0.8;
}
</style>
